<template>
  <div class="login">
    <div class="login-box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="@/assets/logo.png" alt="">
      </div>
        <!-- 1. form表单组件 -->
        <!-- 
          modle 关联的数据   rules校验对象
         -->
      <el-form :model="loginRuleForm" status-icon 
          :rules="loginRules" ref="ruleForm" 
            label-width="0px" class="demo-ruleForm login-form">
          <!-- 1.1 用户名 -->
        <el-form-item  prop="username">
          <el-input  v-model="loginRuleForm.username" 
          autocomplete="off"></el-input>
        </el-form-item>
        <!-- 1.2密码框 -->
        <el-form-item  prop="password">
          <el-input type="password" v-model="loginRuleForm.password" 
          autocomplete="off"></el-input>
        </el-form-item>
          <!-- 1.3 登录和重置按钮 -->
        <el-form-item class="login-btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login } from '@/api/login.js'
export default {
  name: "login-com",
  data(){
    return {
      loginRuleForm:{
        username:"admin",
        password:"123456"
      },
      // 校驗規則
      loginRules:{
        //          必填              错误提示           触发时机;
        username:[{required: true, message:'请输入', trigger: 'blur'}],
        password:[{required: true, message:'请输入', trigger: 'blur'}]
      }
    }
  },
  methods:{
    async login(){
      let {data} = await login(this.loginRuleForm)
      let {meta,data:{token}} = data;
      if(meta.status!=200) return this.$message.fail("登录失败!");
      this.$message.success(meta.msg)
      // 请求成功 后    跳转页面
      this.$router.push("/welcome")
      // 储存token;
      window.localStorage.setItem("login-token" , token)
    }
  }
}
</script>
<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background-color: #2b4b6b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar_box{
  width: 130px;
  height: 130px;
  position: absolute;
  left: 180px;
  top: -65px;
  border-radius:50%;
  border: 10px solid #fff;
  box-shadow: 0 0 20px #aaa;
  background-color: #eee;
  overflow: hidden;
  img{
    width:130px;
  }
}
.login-box {
  width: 450px;
  height: 300px;
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.login-btns{
  display: flex;
  justify-content: flex-end;
}
.login-form{
  position: absolute;
  bottom: 0;
  width: 90%;
}
</style>
  